import { Button, Space, Table, Form, Input, Col, Row, Select, message, Popconfirm, Modal } from 'antd';
// import axios from 'axios'
import React, { useState, useEffect } from 'react';
import { DownOutlined } from '@ant-design/icons';
import "./index.css"
import axios  from '../../../utils/axios';
const { Option } = Select;
const { TextArea } = Input;

const MonthPayment = () => {
  //设置数据
  const [items, setItems] = useState([])
  //获取页面data
  const getList = () => {
    axios({
      url: '/finance/findThisMonthFinanceList?currentPage=1&pageSize=10',
      contentType: "application/json",
    }).then(data => {
      let newData = data.data.data
      setItems(newData)
      console.log(newData);
    })
  }
  //挂载后发起请求
  useEffect(() => {
    getList()
  }, [])
  //弹出框弹出、隐藏
  const [editForm] = Form.useForm();
  const [isEditModalVisible, setEditIsModalVisible] = useState(false);
  //修改框
  //编辑完成
  const onEditFinish = () => {
    let Financial = editForm.getFieldsValue()
    console.log('修改后', Financial);
    axios({
      url: '/finance/updateEarnings',
      method: 'post',
      data: { Financial },
      contentType: "application/json",
    }).then(data => {
      console.log(data);
      message.success('修改成功！')
      getList()

    })
    setEditIsModalVisible(false)
  }
  //编辑取消
  const handleEditCancel = () => {
    setEditIsModalVisible(false)
  }
  //审核状态更改
  const changeAudit=(id)=>{
    console.log(id);
    axios({
      url:"/finance/updateAuditById",
      method:'post',
      params:{
        financial_id:id
      }
    }).then(data=>{
      if(data.data.code == 200){
        message.success('操作成功')
        getList()
      }
    })
  }



  //表头设置
  const columns = [
    {
      title: '审核',
      dataIndex: 'audit',
      key: 'audit',
      width: 60,
      render: (text,record) => (
        <span style={{color:text=='0'?'green':'red'}} onClick={()=>{changeAudit(record.financial_id)}}>
          {text === 0 ? '已审核' : '未审核'}
        </span>
      ),
    },
    {
      title: '客户名称',
      dataIndex: 'customer_name',
      width: 80,
      key: 'customer_name',
    },
    {
      title: '关联',
      dataIndex: 'associated_no',
      width: 160,
      key: 'associated_no',
    },
    {
      title: '联系人',
      dataIndex: 'contact_name',
      key: "contact_name",
      width: 60,
    },
    {
      title: '收入/支出',
      dataIndex: 'income_expenditure',
      key: 'income_expenditure',
      width: 80,
      render: (text) => (
        <span >
          {text === 0 ? '收入' : '支出'}
        </span>
      ),
    },
    {
      title: '收支类别',
      dataIndex: 'income_category',
      width: 80,
      key: 'income_category',
    },
    {
      title: '收支金额',
      dataIndex: 'has_been_receiving',
      key: 'has_been_receiving',
      width: 80,
    },
    {
      title: '备注',
      dataIndex: 'note',
      key: 'note',
      width: 100,
    },
    {
      title: '收支日期',
      dataIndex: 'payment',
      key: 'payment',
      width: 90,
    },
    {
      title: '资金账户',
      dataIndex: 'capital',
      key: 'capital',
      width: 70,
    },
    {
      title: '经办人',
      dataIndex: 'agent',
      key: 'agent',
      width: 60,
    },
    {
      title: '业务员',
      dataIndex: 'salesman',
      key: 'salesman',
      width: 85,
    },
    {
      title: '录入时间',
      dataIndex: 'entryTime',
      key: 'entryTime',
      width: 85,
    },
    {
      title: '管理',
      dataIndex: 'financial_id',
      key: 'financial_id',
      render: (_, record) => (
        <Space size="middle">
          <Button
            size="small"
            onClick={() => {
              setEditIsModalVisible(true)
              console.log('进入');
              console.log('修改前', record);
              editForm.setFieldsValue(record)
            }}>
            修改
          </Button>
          <Popconfirm
            title="确定删除吗?"
            onConfirm={() => { delConfirm(record.financial_id) }}
            okText="确定"
            cancelText="取消"
          >
            <Button size="small">删除</Button>
          </Popconfirm>
        </Space>
      ),
    },

  ];


  //搜索
  const [form] = Form.useForm();
  const onFinish = (values) => {
    let co = values
    console.log(co);
    axios({
      url: '/finance/findFinanceByCondition',
      params: {
        currentPage: 1,
        pageSize: 10,
        condition:co
      },
      contentType: "application/json",
    }).then(data => {
      console.log(data);
      if (data.data.code == 200) {
        message.success('查询成功');
        let searchData = data.data.data
        setItems(searchData)
        console.log(searchData);  
      }
    })
  };
  //高级搜索部分
  const [classsousuo, setclasssousuo] = useState(true);
  const [arrowchange, setArrowchange] = useState(false);
  function sousuo() {
    console.log(classsousuo);
    setclasssousuo(!classsousuo);
    setArrowchange(!arrowchange);
  }
  //立即搜索
  const nowSearch = () => {
    let a = form.getFieldsValue()
    //去undefined
    function clearJson(myObj) {
      Object.keys(myObj).forEach((key) => {
        const v = myObj[key];
        if (v === undefined) {
          delete myObj[key];
        }
      });
      return myObj
    }
    console.log(clearJson(a));
    axios({
      url: '/finance/seniorQueryFinance?currentPage=1&pageSize=10',
      params: clearJson(a),
      contentType: "application/json",
    }).then(data => {
      if(data.data.code==200){
        console.log(data.data.data);
        setItems(data.data.data)
      }
    })
  }

  // 点击删除弹出小窗
  const delConfirm = (id) => {
    console.log(id);
    axios({
      url: '/finance/deleteFinanceById',
      method: 'post',
      params: {
        financial_id: id
      }
    }).then(data => {
      if (data.data.code == 200) {
        console.log(data);
        message.success('删除成功！');
        getList()
      }

    })

  };
  // ---------------
  return (
    <div id='content'>
      <div className={classsousuo ? "sousuonone" : "sousuoblock"}>
        <Form
          form={form}
          name="advanced_search"
          className="ant-advanced-search-form"
        >
          <Row span={24}>
            <div className='searchBox'>
              <Col style={{ backgroundColor: '#EFF0EF' }} >
                <div className='box'>
                  <Form.Item
                    name='associated_no'
                    label='编号'
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item label="收支日期" name='payment'>
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name='agent'
                    label='经办人'
                  >
                    <Select placeholder="请选择">
                      <Option value="超级管理员">超级管理员</Option>
                      <Option value="张三">张三</Option>
                    </Select>
                  </Form.Item>
                </div>
                <div className='box'>
                  <Form.Item
                    name='customer_name'
                    label='客户名称'
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name='note'
                    label='备注'
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name='capital'
                    label='资金账户'
                  >
                    <Select placeholder="请选择">
                      <Option value="默认账户">默认账户</Option>
                    </Select>
                  </Form.Item>
                </div>
                <div className='box'>
                  <Form.Item
                    name='income_expenditure'
                    label='收入/支出'
                  >
                    <Select placeholder="请选择">
                      <Option value="0">收入</Option>
                      <Option value="1">支出</Option>
                    </Select>
                  </Form.Item>
                  <Form.Item
                    name='salesman'
                    label='业务员'
                  >
                    <Select placeholder="请选择">
                      <Option value="超级管理员">超级管理员</Option>
                      <Option value="张三">张三</Option>
                    </Select>
                  </Form.Item>
                  <Form.Item
                    name='audit'
                    label='是否审核'
                  >
                    <Select placeholder="请选择">
                      <Option value="0">已审核</Option>
                      <Option value="1">未审核</Option>
                    </Select>
                  </Form.Item>
                </div>
              </Col>
              <div className='btnitem'>
                <Button type="primary" htmlType="submit" onClick={nowSearch}>
                  立即搜索
                </Button>
                <Button
                  style={{
                    margin: '0 8px',
                  }}
                  onClick={() => {
                    form.resetFields();
                    getList()
                  }}
                >
                  清空条件
                </Button>
              </div>
            </div>
          </Row>
        </Form>
      </div>
      <Table columns={columns} rowKey={record => record.financial_id} dataSource={items} pagination={{ defaultPageSize: 3 }} />
      <Modal title="修改" visible={isEditModalVisible} onOk={onEditFinish} onCancel={handleEditCancel} okText='保存' cancelText='关闭'>
        {/* 弹出框里的form */}
        <Form
          form={editForm}
          name='basic'
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          autoComplete='off'
        >
          <Form.Item label="收支日期" name='payment'>
            <Input />
          </Form.Item>
          <Form.Item label="收支类别" name='income_category'>
            <Select placeholder='请选择'>
              <Select.Option value="1">合同款</Select.Option>
              <Select.Option value="2">订单预付款</Select.Option>
              <Select.Option value="3">维护费</Select.Option>
              <Select.Option value="4">产品续费</Select.Option>
              <Select.Option value="5">其他</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="收支金额" name='has_been_receiving'>
            <Input />
          </Form.Item>
          <Form.Item label="资金账户" name='capital'>
            <Select placeholder='请选择'>
              <Select.Option value="默认账户">默认账户</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="经办人" name='agent'>
            <Select placeholder='请选择'>
              <Select.Option value="超级管理员">超级管理员</Select.Option>
              <Select.Option value="张三">张三</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="备注" name='note'>
            <TextArea rows={4} />
          </Form.Item>
          <Form.Item label="业务员" name='salesman'>
            <Select placeholder='请选择'>
              <Select.Option value="超级管理员">超级管理员</Select.Option>
              <Select.Option value="张三">张三</Select.Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
      {/* 搜索部分 */}
      <div id='searchForm'>
        <Form name="search" layout="inline" onFinish={onFinish}>
          <Form.Item
            name="condition"
          >
            <Input placeholder="客户名称、手机号码、备注" />
          </Form.Item>

          <Form.Item >
            <Button
              type="primary"
              htmlType="submit"
              size='small'
            >
              搜索
            </Button>
          </Form.Item>
        </Form>
      </div>
      <Button
        type="primary"
        htmlType="submit"
        size='small'
        onClick={sousuo}
        id='heighly'
      >
        高级搜索<DownOutlined className={arrowchange ? "arrowup" : "arrowdown"} />
      </Button>
    </div>
  )
}


export default MonthPayment